<template>
  <div class="dashboard-container" ref="dashboard">
    <component :is="currentRole" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import adminDashboard from './admin'
import editorDashboard from './editor'
import UserInfo from '@/components/Label/UserInfo'

export default {
  name: 'Dashboard',
  // components: { UserInfo },
  components: { adminDashboard, editorDashboard, UserInfo },
  data() {
    return {
      currentRole: 'adminDashboard',
      width: window.innerWidth * 0.6 + 'px',
      height: window.innerWidth * 0.3 + 'px',
      cwidth: window.innerWidth
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  // methods:{

  // }
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
  },
  mounted() {
  },
  beforeDestroy() { // 在组件生命周期结束的时候销毁。
  },
  watch: {
    width: function(val) {
      console.log(val)
      val = window.innerWidth * 0.6 + 'px'
    }
  }
}
</script>

<style scoped>
.userInfo-container {
  margin-top: 200px;
}
</style>
